<template>
	<div id="app">
        <div class="bi-container">
            <div id="map" style="width: 100vw; height: 100vh"></div>
        </div>
	</div>
</template>

<script>
import { Earth } from "./assets/QY3D";
export default {
    data(){
        return{
            earth: null,
            viewer: null,
        }
    },
	mounted() {
		this.initEarth();

        this.loadYunNan();


        // 业务操作
        this.loadGeoJson();
        this.loadPoint();

        // 加载鼠标事件
        this.eventFn()
	},
    methods:{
        initEarth(){
            this.earth = new Earth();
            this.viewer = this.earth.init("map");
            this.viewer._cesiumWidget._creditContainer.style.display = "none";
        },

        loadYunNan(){
            // 云南省
            Cesium.GeoJsonDataSource.load("/static/530000.json", { 
                fill: Cesium.Color.fromCssColorString('rgba(255,102,0,0)'.toString()),
                stroke: Cesium.Color.fromCssColorString('#15c8e1'.toString()),
                strokeWidth: 3,
            }).then(dataSource=>{
                this.viewer.dataSources.add(dataSource);
                let entity = dataSource.entities._entities._array[0];
                entity.polygon.height = 0;
                entity.polygon.extrudedHeight = 60000;
                entity.polygon.material = new Cesium.ImageMaterialProperty({
                    image:'/static/121321.png',
                })
                this.viewer.flyTo(dataSource)
            })
        },
        
        // 加载图斑
        loadGeoJson(){
            Cesium.GeoJsonDataSource.load("/static/region.json", { 
                fill: Cesium.Color.fromCssColorString('#05efdfaa'.toString()),
                stroke: Cesium.Color.fromCssColorString('#05efdf'.toString()),
                strokeWidth: 3,
            }).then(dataSource=>{
                this.viewer.dataSources.add(dataSource);
                let entity = dataSource.entities._entities._array[0];
                entity.name = "图斑id";
                entity.polygon.height = 0;
                entity.polygon.extrudedHeight = 60250;
            })
        },

        // 加载点位
        loadPoint(){
            let position = Cesium.Cartesian3.fromDegrees(103.271484375, 25.62171595984575, 120000);
            let positionLabel = Cesium.Cartesian3.fromDegrees(103.271484375, 25.62171595984575, 110000);
            this.viewer.entities.add({
                position: position,
                name: '基地id',
                billboard:{
                    image: require("./assets/local.png"),
                }
            });
            this.viewer.entities.add({
                name: '基地id',
                position: positionLabel,
                label:{
                    text: 'xxx基地',
                    showBackground: true,
                    backgroundColor: Cesium.Color.fromCssColorString('#ffe900aa'),
                    font: "17px sans-serif"
                }
            })
        },

        // 鼠标事件
        eventFn(){
            let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
            // 单击事件
            handler.setInputAction((event) => {
				let pick = this.viewer.scene.pick(event.position);
                if(!pick) return;
				let clickObject = pick.id;

                // clickObject  为添加的entity对象
                console.log(clickObject.name);

                if(clickObject.label){
                    //点击文字
                }

                if(clickObject.billboard){
                    //点击 billboard
                }


            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
    },
    beforeDestroy(){
        window.location.reload();
    }
};
</script>

<style lang="less">
    body{
        margin: 0
    }
</style>
